<!--
 * @Description: 打标签弹窗
 * @Author: lpl
 * @Date: 2023-03-02 13:07
 * @LastEditors: lpl
 * @LastEditTime: 2023-03-02 13:07
-->

<template>
  <el-dialog
    :close-on-click-modal="false"
    :close-on-press-escape="false"
    :destroy-on-close="destroyOnClose"
    :title="title"
    :visible.sync="staffDialog"
    append-to-body
    @close="staffClose"
    width="500px"
    >
    <div>
      <el-form label-width="60px">
        <el-form-item :label="formItemLabel">
          <el-autocomplete
            v-model.trim="makeLabel"
            :fetch-suggestions="querySearch"
            :trigger-on-focus="false"
            class="inline-input"
            placeholder="请输入内容"
            @select="handleSelect"
            style="width:320px"
          ></el-autocomplete>
          <p style="font-size: 12px;color: #082aff;">输入多个标签以；分隔</p>
        </el-form-item>
      </el-form>
      <div slot="footer">
        <el-button type="primary" @click="handleAddTag" class="dialog-btn">确 定</el-button>
      </div>
    </div>
  </el-dialog>
</template>

<script>
import { getLabelSelectList} from "@/api/label";

export default {
  props: {
    title: {
      type: String,
      default: "添加标签",
    },
    // 添加标签显隐
    visible: {
      type: Boolean,
      default: false,
    },
    destroyOnClose: {
      type: Boolean,
      default: true,
    },
    label: {
      type: String,
      default: '',
    },
    formItemLabel:{
      type:String,
      default :'标签'
    },
  },
  computed: {
    staffDialog: {
      get() {
        if(this.label){
          console.log(this.label.trim().endsWith("；") || this.label.trim().endsWith(";"))
          if (this.label.trim().endsWith("；") || this.label.trim().endsWith(";")) {
            this.makeLabel = this.label
          }else{
            this.makeLabel = this.label + '；'
          }
        }else{
          this.makeLabel = ''
        }
        return this.visible;
      },
      set(val) {
        this.$emit("update:visible", val);
      },
    },
  },
  watch: {
    staffDialog: {
      handler(val) {
        if (val) {

        }
      },
    },
  },
  data() {
    return {
      makeLabel : '',
      labelList: [],
      labelArr:[],
      oldSlabel:'',
    }
  },
  methods: {
    // 弹窗的关闭
    staffClose() {
      this.staffDialog = false;
    },
    // 选中后触发事件
    handleSelect(value) {
      let str = ''
      if(this.oldSlabel.indexOf(';') != -1 ||
        this.oldSlabel.indexOf('；') != -1){
        this.labelArr = this.oldSlabel.split(/[；;]/g)
        for(let i = 0 ; i < this.labelArr.length ; i++){
          if(i < this.labelArr.length -1){
            str += this.labelArr[i] + '；'
          }else{
            str += value.value + '；'
          }
        }
      }else{
        str = value.value + '；'
      }
      this.$set(this , 'makeLabel' , str)
    },
    // 搜索框
    async querySearch(queryString , cb) {
      let arr = []
      if( queryString.indexOf(';') != -1 ||
        queryString.indexOf('；') != -1){
        arr = queryString.split(/[；;]/g)
      }else{
        arr.push(queryString)
      }
      // let restaurants = this.labelList;
      // let restaurants =
      // let results = queryString ? restaurants.filter(this.createFilter(arr[arr.length - 1])) : restaurants;
      // let results = arr[arr.length - 1] ? restaurants.filter(this.createFilter(arr[arr.length - 1])) : [];
      let results = []
      if(arr[arr.length - 1]){
        await getLabelSelectList(arr[arr.length - 1]).then(res => {
          if(res.code === 200){
            results = res.data
          }else{
            results = []
          }
        }).catch(() => {
          results = []
        })
      }
      this.oldSlabel = this.makeLabel
      // 调用 callback 返回建议列表的数据
      cb(results);
    },
    // 自定义的筛选条件
    // createFilter(queryString) {
    //   return (restaurant) => {
    //     return (restaurant.value.toLowerCase().indexOf(queryString.toLowerCase()) === 0);
    //   };
    // },
    // 确定按钮
    handleAddTag() {
      if (this.makeLabel) {
        this.makeLabel = this.makeLabel.replace(
          /^\s*|\s*$/g,
          ''
        )
        let tagList = []
        if (
          this.makeLabel.indexOf(';') != -1 ||
          this.makeLabel.indexOf('；') != -1
        ) {
          let arr = this.makeLabel.split(/[；;]/g)
          arr.forEach((item) => {
            item = String(item).replace(/^\s*|\s*$/g, '')
            if (tagList.indexOf(item) == -1 && item != '') {
              tagList.push(item)
            }
          })
        } else {
          tagList.push(this.makeLabel)
        }
        this.makeLabel = tagList.join(';')
      }
       this.$emit('confirm' , this.makeLabel)
       this.staffDialog = false
    },
  }
}
</script>

<style lang="scss" scoped>
@import "@/styles/base.scss";

::v-deep .dialog-btn{
  margin-left: 88%;
}
</style>
